<form class="layui-form">
<div id="treeSelect1"></div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="text" name="title" id="title"  style="visibility: hidden;" class="layui-input">
            <input type="text" name="tcCatgId" id="tcCatgId"  style="visibility: hidden;" class="layui-input">
        </div>
    </div>
    <table class="BaoYangTable layui-table" id="showData" lay-filter="showData"></table>
    <div class="footer layui-btn-container">
        <div class="layui-form-item">
            <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit  lay-filter="mysub">确定</button>
            <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
        </div>
    </div>
<div>
</form>
    <style scoped>
        .layui-form-label {
            width: 80px;
            font-size: 10px;
        }
        .layui-icon .edgeI{
            display: none;
        }
        .btn_one{
            margin: 0;
            padding: 0 5px;
            border: 0;
            text-align: center;
            width: 70px;
            height: 25px;
            font-size: 12px;
            color: #fff;
            line-height: 0px;
        }
        #showData{
            display: inline-block;
            width: 50%;
            position: relative;
        }
        #treeSelect1{
            display: inline-block;
            position: relative;
            left: 0;
            text-align: left;
            width: 50%;
        }
        .btn1,
        .btn2 {
            width: 70px;
            height: 25px;
            font-size: 12px;
            color: #fff;
            line-height: 0px;
        }
    
        .btn1,.btn_one{
            background: red;
        }
    
        .btn2 {
            background: #8A8A8A;
        }
    
        .footer {
            text-align: center;
            position: relative;
        }
    
        .layui-btn-container .layui-btn+.layui-btn {
            margin-left: 40px;
        }
    
        .layui-input {
            width: auto;
        }
    
        #layuiadmin-form-tags {
            text-align: center;
        }
    
        .footer {
            justify-content: center;
        }
    
        .layui-form-item {
            margin-top: 15px;
        }
    
        .layui-table-view .layui-table .layui-table-box{
            margin-top: 10px;
            display: inline-block;
            width: 50%;
            position: relative;
        }
    
        .addNewProject {
            font-size: 13px;
            font-weight: bold;
        }
</style>    
<script>
    layui.use(['admin', 'form', 'api', 'table', 'laytpl', 'utill', 'laydate', 'treeSelect','tree'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            jquery = layui.jquery,
            laydate = layui.laydate,
            form = layui.form,
            layer = layui.layer,
            utill = layui.utill,
            tree = layui.tree,
            treeSelect = layui.treeSelect;
            var obj_data = '';
            admin.req({
                url: api.host + api.selectoption,
                done: function (res) {
                    function transferKey(odata) {
                        odata.forEach(obj => {
                            obj.title = obj.tcCatgName
                            obj.children = obj.childList
                            delete obj["tcCatgName"]
                            delete obj["childList"]
                            if (obj.children instanceof Array) {
                                transferKey(obj.children)
                            }
                        })
                        return odata
                    }
                    odataArr = transferKey(res.data)
                    tree.render({
                        elem: "#treeSelect1",
                        data: odataArr,
                        click: function(data){
                            $('#tcCatgId').attr('value',data.data.tcCatgId)
                            $('#title').attr('value',data.data.title)
                            $("#treeSelect1").val(data.data.title + "/" + data.data.tcCatgId)
                            table.render(
                                $.extend({}, utill.tableOpts(), {
                                    elem: '#showData',
                                    width:500,
                                    method: "post",
                                    url: api.host + api.sbwd.doSelectList,
                                    contentType: 'application/json',
                                    dataType: "json",
                                    cols: [
                                        [
                                            {
                                                type: 'radio'
                                            }
                                            ,
                                            {
                                                field: 'tcDocName',
                                                title: '相关文档名称',
                                                event: 'loading',
                                                align: 'center'
                                            }
                                        ]
                                    ],
                                    // request: {
                                    //     pageName: 'pageNum' //页码的参数名称，默认：page
                                    //     ,
                                    //     limitName: 'pageSize' //每页数据量的参数名，默认：limit
                                    //     ,
                                    //     tcCatgId:data.data.tcCatgId
                                    // },
                                    where:{
                                        tcCatgId: data.data.tcCatgId
                                    },
                                    page: true,
                                    limit: 5,
                                    text: {
                                        none: '暂无' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                                    },
                                    limits: [5,8],
                                    parseData: function (res) { //res 即为原始返回的数据
                                        if (res.code != 0) {
                                            layer.alert(res.msg)
                                            return
                                        }
                                        return {
                                            "code": res.code, //解析接口状态
                                            "msg": res.msg, //解析提示文本
                                            "count": res.data.total, //解析数据长度
                                            "data": res.data.list //解析数据列表
                                        }
                                    }
                                })
                            );
                            table.render()
                        },
                    });
                }
            });
           ;
            $('.footer').on('click','.btn2',function(){
                layer.closeAll();
            })  
    });
</script>